Bootstrap 是一款用來開發網站等等的前端樣式框架，包括表單、按鈕或是各種網頁上常見的元件，基本上 Bootstrap 上也可以找到類似的元件。

至於為什麼要有 Bootstrap 呢？可能是有人覺得網頁每個東西都要用 div 之類的在那邊刻呀刻，實在是太累了，因此才會有 Bootstrap 的誕生。

首先要引入 Bootstrap，要先 html 一開始放入下面這段：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

如果你嫌看英文太麻煩的話，網路上有許多翻譯過的版本，我自己都是在六角學院翻譯過的 Bootstrap 上找尋我要的元件。

無論是導覽列

或是搜尋框

甚至是各式各樣的按鈕

在你想要的樣式下面都會有對應的語法，只要將語法複製貼上，再將範例文字改成你要的，就完成啦！

Grid

Bootstrap 的 Grid 也很不錯用。它會將網頁分成欄（column）與列（row），又以 12 為單位。

假設今天將整個網頁分成三塊

若你想要在 3 填一個按鈕，那麼必須先新增一個 row，再以 12 為分母，將網頁分成三塊（因此一塊是 4）

<div class="row">
    <div class="col-4 "></div>
	<div class="col-4 "></div>
	<div class="col-4 "></div>
</div>	

要在第三塊放入按鈕
那麼就

<div class="row">
    <div class="col-4 "></div>
	<div class="col-4 "></div>
	<div class="col-4 ">
		<button type="button" class="btn btn-primary">按鈕</button>
	</div>
</div>	

這樣 3 的部分就是按鈕囉。
而以 12 為單位這樣將網頁分塊，也就是 grid 的概念，很適合用在列表或是圖片的區塊上，能夠確保每個部分都一樣大，不妨可以試試看：）